<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <div class="nav-left">
          <button class="btn-back" @click="goBack">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M19 12H5M12 19L5 12L12 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            返回
          </button>
        </div>

        <!-- <div class="nav-right">
          <span class="user-info">当前用户：管理员</span>
        </div> -->
      </div>
    </nav>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="assign-practice-container">
        <div class="form-card">
          <div class="card-header">
            <h2 class="form-title">分配练习任务</h2>
            <p class="form-subtitle">为咨客分配练习任务并设置执行时间</p>
          </div>

          <form @submit.prevent="submitForm">
            <!-- 问询编号 -->
            <div class="form-group">
              <label class="form-label">问询编号</label>
              <div class="input-wrapper">
                <input
                  type="text"
                  class="form-input"
                  v-model="formData.code"
                  placeholder="自动从URL获取"
                  disabled
                />
                <div class="input-icon">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 10.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H12.5M22 22L21 21M16 18C16 19.6569 17.3431 21 19 21C20.6569 21 22 19.6569 22 18C22 16.3431 20.6569 15 19 15C17.3431 15 16 16.3431 16 18Z"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <!-- 咨客手机号 -->
            <div class="form-group">
              <label class="form-label">咨客手机号</label>
              <div class="input-wrapper">
                <input
                  type="text"
                  class="form-input"
                  v-model="formData.phone"
                  placeholder="请输入咨客手机号"
                  maxlength="11"
                  :class="{ error: errors.phone }"
                />
                <div class="input-icon">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M22 16.92V19.92C22 20.52 21.53 20.99 20.96 21.08C20.48 21.16 19.98 21.2 19.47 21.2C10.61 21.2 3.33995 13.93 3.33995 5.07C3.33995 4.56 3.37995 4.06 3.45995 3.58C3.54995 3.01 4.01995 2.54 4.61995 2.54H7.61995C8.17995 2.54 8.63995 2.96 8.71995 3.52C8.78995 3.94 8.82995 4.37 8.82995 4.8C8.82995 5.67 8.94995 6.52 9.17995 7.33C9.27995 7.7 9.13995 8.1 8.82995 8.36L7.48995 9.53C8.83995 12.45 11.52 15.13 14.44 16.48L15.61 15.14C15.87 14.83 16.27 14.69 16.64 14.79C17.45 15.02 18.3 15.14 19.17 15.14C19.6 15.14 20.03 15.18 20.45 15.25C21.01 15.33 21.43 15.79 21.43 16.35L22 16.92Z"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>
              <div class="error-message" v-if="errors.phone">
                {{ errors.phone }}
              </div>
            </div>

            <!-- 练习任务列表 -->
            <div class="practice-list-section">
              <div class="section-header">
                <div class="section-title">
                  <h3>练习任务列表</h3>
                  <p class="section-subtitle">为咨客分配一个或多个练习任务</p>
                </div>
                <button
                  type="button"
                  class="btn btn-primary"
                  @click="addPractice"
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 5V19M5 12H19"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                  添加练习任务
                </button>
              </div>

              <div
                v-for="(practice, index) in formData.practiceList"
                :key="index"
                class="practice-item"
              >
                <div class="practice-header">
                  <div class="practice-title">
                    <span class="practice-number"
                      >练习任务 {{ index + 1 }}</span
                    >
                    <span class="practice-status" v-if="index === 0">默认</span>
                  </div>
                  <button
                    type="button"
                    class="btn btn-danger"
                    @click="removePractice(index)"
                    v-if="formData.practiceList.length > 1"
                  >
                    <svg
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M18 6L6 18M6 6L18 18"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                    删除
                  </button>
                </div>

                <div class="practice-form">
                  <div class="form-group">
                    <label class="form-label">练习任务ID</label>
                    <div class="input-wrapper">
                      <input
                        type="number"
                        class="form-input"
                        v-model.number="practice.practiceid"
                        placeholder="请输入练习任务ID"
                        min="1"
                        :class="{
                          error: getPracticeError(index, 'practiceid'),
                        }"
                      />
                      <div class="input-icon">
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M9 12H15M9 16H15M10 6H14L15.5 4H8.5L10 6ZM6 6H18C18.5304 6 19.0391 6.21071 19.4142 6.58579C19.7893 6.96086 20 7.46957 20 8V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V8C4 7.46957 4.21071 6.96086 4.58579 6.58579C4.96086 6.21071 5.46957 6 6 6Z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </div>
                    </div>
                    <div
                      class="error-message"
                      v-if="getPracticeError(index, 'practiceid')"
                    >
                      {{ getPracticeError(index, "practiceid") }}
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="form-label">开始时间</label>
                    <div class="input-wrapper">
                      <input
                        type="datetime-local"
                        class="form-input"
                        v-model="practice.starttime"
                        :class="{ error: getPracticeError(index, 'starttime') }"
                      />
                      <div class="input-icon">
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </div>
                    </div>
                    <div
                      class="error-message"
                      v-if="getPracticeError(index, 'starttime')"
                    >
                      {{ getPracticeError(index, "starttime") }}
                    </div>
                  </div>

                  <div class="form-group">
                    <label class="form-label">结束时间</label>
                    <div class="input-wrapper">
                      <input
                        type="datetime-local"
                        class="form-input"
                        v-model="practice.endtime"
                        :class="{ error: getPracticeError(index, 'endtime') }"
                      />
                      <div class="input-icon">
                        <svg
                          width="16"
                          height="16"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </div>
                    </div>
                    <div
                      class="error-message"
                      v-if="getPracticeError(index, 'endtime')"
                    >
                      {{ getPracticeError(index, "endtime") }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="form-actions">
              <button
                type="submit"
                class="btn btn-primary btn-submit"
                :class="{ loading: submitting }"
                :disabled="submitting"
              >
                <span v-if="!submitting">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M17 8L21 12M21 12L17 16M21 12H9M13 4C13 4 12.5 4 11 4C7 4 5 6 5 10C5 13.5 5 15 5 18C5 20 7 20 11 20C12.5 20 13 20 13 20"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                  提交分配
                </span>
                <span v-else>提交中...</span>
              </button>
              <button type="button" class="btn btn-reset" @click="resetForm">
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M4 4V9H4.58152M19.9381 11C19.446 7.05369 16.0796 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9M4.58152 9H9M20 20V15H19.4185M19.4185 15C18.2317 17.9318 15.3574 20 12 20C7.92038 20 4.55399 16.9463 4.06189 13M19.4185 15H15"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
                重置
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { assignPractice } from "../../api/case";

export default {
  name: "AssignPractice",
  data() {
    return {
      // 表单数据
      formData: {
        code: "", // 问询编号，从URL获取
        phone: "", // 咨客手机号
        practiceList: [
          {
            practiceid: null, // 练习任务ID
            starttime: "", // 练习开始时间
            endtime: "", // 练习结束时间
          },
        ],
      },
      // 表单错误信息
      errors: {
        phone: "",
      },
      // 练习任务错误信息
      practiceErrors: {},
      // 提交状态
      submitting: false,
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      if (window.history.length > 1) {
        this.$router.go(-1);
      } else {
        this.$router.push("/");
      }
    },

    // 从URL获取参数
    getUrlParams() {
      const urlParams = new URLSearchParams(window.location.search);
      this.formData.code = urlParams.get("code") || "";
    },

    // 添加练习任务
    addPractice() {
      this.formData.practiceList.push({
        practiceid: null,
        starttime: "",
        endtime: "",
      });
    },

    // 删除练习任务
    removePractice(index) {
      if (this.formData.practiceList.length <= 1) {
        alert("至少保留一个练习任务");
        return;
      }

      this.formData.practiceList.splice(index, 1);
      // 删除对应的错误信息
      if (this.practiceErrors[index]) {
        this.$delete(this.practiceErrors, index);
      }
    },

    // 获取练习任务的错误信息
    getPracticeError(index, field) {
      if (this.practiceErrors[index] && this.practiceErrors[index][field]) {
        return this.practiceErrors[index][field];
      }
      return "";
    },

    // 表单验证
    validateForm() {
      let isValid = true;

      // 重置错误信息
      this.errors.phone = "";
      this.practiceErrors = {};

      // 验证手机号
      if (!this.formData.phone) {
        this.errors.phone = "请输入咨客手机号";
        isValid = false;
      } else if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        this.errors.phone = "手机号格式不正确";
        isValid = false;
      }

      // 验证练习任务
      this.formData.practiceList.forEach((practice, index) => {
        this.$set(this.practiceErrors, index, {});

        // 验证练习任务ID
        if (!practice.practiceid || practice.practiceid <= 0) {
          this.practiceErrors[index].practiceid = "请输入有效的练习任务ID";
          isValid = false;
        }

        // 验证开始时间
        if (!practice.starttime) {
          this.practiceErrors[index].starttime = "请选择开始时间";
          isValid = false;
        }

        // 验证结束时间
        if (!practice.endtime) {
          this.practiceErrors[index].endtime = "请选择结束时间";
          isValid = false;
        } else if (
          practice.starttime &&
          new Date(practice.endtime) <= new Date(practice.starttime)
        ) {
          this.practiceErrors[index].endtime = "结束时间必须晚于开始时间";
          isValid = false;
        }
      });

      return isValid;
    },

    // 提交表单
    submitForm() {
      if (!this.validateForm()) {
        alert("请检查表单填写是否正确");
        return;
      }

      this.submitting = true;

      // 准备提交数据
      const submitData = {
        code: this.formData.code,
        phone: this.formData.phone,
        practiceList: this.formData.practiceList,
        // 系统自动填充的字段
        createtime: new Date().toISOString(),
        createuser: "currentTeacherId", // 这里应该从系统状态获取当前老师ID
        createusername: "当前老师姓名", // 这里应该从系统状态获取当前老师姓名
        teacherId: "currentTeacherId", // 这里应该从系统状态获取当前老师ID
        // 以下字段可能需要根据手机号或code从系统获取
        cusId: "", // 通过手机号或code获取
        zdmemberid: null, // 通过手机号或code获取
        zdmembername: "", // 通过手机号或code获取
      };

      // 调用API
      assignPractice(submitData)
        .then((res) => {
          this.submitting = false;
          alert("练习分配成功");
          this.resetForm();
        })
        .catch((error) => {
          this.submitting = false;
          alert("练习分配失败: " + (error.message || "未知错误"));
          console.error("分配练习失败:", error);
        });
    },

    // 重置表单
    resetForm() {
      this.formData.phone = "";
      this.formData.practiceList = [
        {
          practiceid: null,
          starttime: "",
          endtime: "",
        },
      ];

      // 重置错误信息
      this.errors.phone = "";
      this.practiceErrors = {};
    },
  },
  mounted() {
    this.getUrlParams();
  },
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

/* 导航栏样式 */
.navbar {
  background: skyblue;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-left .btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  box-sizing: border-box;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.nav-left .btn-back:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info {
  font-size: 14px;
  opacity: 0.9;
}

/* 主内容区域 */
.main-content {
  box-sizing: border-box;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.assign-practice-container {
  box-sizing: border-box;
  padding: 20px 0;
}

.form-card {
  background: white;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef2f7;
}

.form-title {
  color: #1e293b;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
}

.form-subtitle {
  color: #64748b;
  font-size: 16px;
  margin: 0;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 12px 44px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  background: #fafafa;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.form-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.practice-list-section {
  margin: 32px 0;
  box-sizing: border-box;
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title h3 {
  color: #1e293b;
  margin: 0 0 4px 0;
  font-size: 18px;
}

.section-subtitle {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.btn-danger {
  background: #ef4444;
  color: white;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

.btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.practice-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s;
}

.practice-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.practice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e2e8f0;
}

.practice-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.practice-number {
  font-weight: 600;
  color: #374151;
}

.practice-status {
  background: #dbeafe;
  color: #1e40af;
  box-sizing: border-box;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.practice-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-actions {
  margin-top: 32px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #eef2f7;
}

.btn-submit {
  padding: 12px 32px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
}

.btn-reset {
  background: #6b7280;
  color: white;
  margin-left: 12px;
}

.btn-reset:hover {
  background: #4b5563;
  transform: translateY(-2px);
}

/* 加载状态 */
.btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
    box-sizing: border-box;
  }

  .main-content {
    padding: 16px;
    box-sizing: border-box;
  }

  .form-card {
    padding: 20px;
    box-sizing: border-box;
  }

  .practice-form {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .practice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .btn-reset {
    margin-left: 0;
  }
}
</style>
